<template>
  <div>
    <!-- 表头分开写 -->
    <div></div>

    <!-- 表格内容 -->
    <div class="table-container" style="height:200px">
      <!-- 表格区域 -->




      <!-- 表头部分 -->
      <div class="table-header">
        <table>
          <thead>
            <tr>
  <th :style="{ height: '40px', width: columns[0].width }">{{ columns[0].label }}</th>
  <th :style="{ height: '40px', width: columns[1].width }">{{ columns[1].label }}</th>
  <th :style="{ height: '40px', width: columns[2].width }">
    <div style="display: flex; align-items: center; ">
      <span>{{ columns[2].label }}</span>
      <button @click="orderInverse" class="history-sort-button"></button>
    </div>
  </th>
</tr>
          </thead>



        </table>
      </div>

      <div class="table-location">
        <div class="table-wrapper table1" :style="{ height: computedHeight,overflow:computedOverflow }">


          <table>
            <!-- <thead>
            <tr>
              <th v-for="(column, index) in columns" :key="index" :style="{ height: '40px' }">
                {{ column.label }}
              </th>
            </tr>
          </thead> -->
            <tbody>
              <tr v-for="(row, rowIndex) in data" :key="rowIndex"
                class="table-row"
                :style="{ height: '40px', pointerEvents: 'auto' }">
                <!-- <td v-for="(column, index) in columns" :key="index" :style="{ width: column.width }">
                  <template>
                    {{ row[column.prop] }}
                  </template>
</td> -->
                <td :style="{ width: columns[0].width }">
                  <template>
                    {{ rowIndex + 1 }}
                  </template>
                </td>

                <!-- 后续列：显示原数据 -->
                <td v-for="(column, colIndex) in columns.slice(1)" :key="colIndex" :style="{ width: column.width }">
                  <template>
                    {{ row[column.prop] }}
                  </template>
                </td>
              </tr>
            </tbody>
          </table>


        </div>

        
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSelected: false,
    };
  },
  name: "CustomTableModule2UserHistory",
  props: {
    data: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  computed: {
    // 动态生成弹窗样式
    customTableFlex() {
      return {
        height: this.height
      };
      
    },
    computedHeight() {
      // 根据数据长度计算表格高度
      if (this.data.length <= 3) {
        return `${4.10* this.data.length}vh`;
      } else {
        return '12.30vh';
      }
    },

    computedOverflow() {
      if (this.data.length <= 3) {
        return `none`;
      } else {
        return 'auto';
      }
    }
  

  },
  methods: {
    handleHover(row, index) {
      if (!this.isSelected) {
        this.$emit('viewDetailsHover', row);
      }

    },
    handleMouseLeave(row, index) {
      if (!this.isSelected) {
        this.$emit('hoverLeave', row);
      }
    },
    
    resetSelection() {
      this.data.forEach(row => {
        this.$set(row, 'isSelected', false); // 确保响应式更新
        this.isSelected = false;
      });
    },

   orderInverse(){
    this.$emit('orderInverse');
   },
   
  }
};
</script>

<style scoped>
.table-header {
  position: sticky;
  top: 0;
  background-color: transparent;
  z-index: 10;
  background-size: 100% 100%;
  /* width: 70%; */
}

/* 外层容器，使用 flex 布局 */
.table-container {
  display: flex;
  padding-left:2.5% ;
  flex-direction: column;
  height: 100%;
  width: 100%;
  pointer-events: none;
  /* background-color: yellow; */
}

/* 表格区域，设置为可滚动部分 */
.table-wrapper {
  /* flex-grow: 1; */
  height: 39vh;
  /* 设定表格容器的最大高度 */
  overflow-y: auto!important;
  /* 启用垂直滚动 */
  /* -ms-overflow-style: none; */
  /* 隐藏滚动条:IE 和 Edge 浏览器 */
  /* scrollbar-width: none; */
  /* 隐藏滚动条:Firefox 浏览器 */
}

.table1::-webkit-scrollbar{
  width:0.125rem;
  background-color: rgba(0,16,29,0.5)!important;
}

.table1::-webkit-scrollbar-thumb{
  background:#0378FF;
  border-radius:0.625rem;
}

/* 隐藏滚动条（适用于 WebKit 浏览器） */
/* .table-wrapper::-webkit-scrollbar {
  display: none;
} */

/* 表头样式 */
thead {
  background-color: transparent;
  /* 半透明背景，避免内容与表头重叠 */
  background-image: url(../assets/img/module2/thead.png);
  /* 从浅绿色渐变到透明 */
  position: sticky;
  background-size: 100% 100%;
  top: 0%;
  z-index: 2;
  /* 确保表头位于表格内容之上 */
  /* backdrop-filter: blur(5px);  */
}

/* 表格样式 */
table {
  left:2.5%;
  width: 95%;
  height: 100%;
  border-collapse: collapse;
  background-color: transparent;
  border-collapse: separate;
  /* 不合并单元格边框 */
  border-spacing: 0 5px;
  /* 为行设置 5px 的垂直间距 */

}

/* 表头单元格样式 */
th {
  /* padding: 1px; */
  text-align: left;
  color: #ffffff;
  border-bottom: 0px solid #ddd;
  font-size: 14px;
  font-weight: normal;
  padding-left: 15px;
  border: none;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font: 14px;

}

/* 表格内容单元格样式 */
td {
  /* padding: 1px; */
  text-align: left;
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: normal;
  padding-left: 15px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-size: 14px;
}

/* 表格行的背景色样式 */
.table-row {
  z-index: 1;
  transition: background-color 0.3s ease;
  background-image: url('../assets/img/module2/table.png');
  background-size: cover;
}

.table-row-selected {
  z-index: 1;
  background-image: url('../assets/img/module2/rowselect.png');
  transition: background-color 0.3s ease;
  background-size: cover;
}

/* 悬停行的背景色 */
/* .table-row:hover {
  background-image: linear-gradient(to right, rgb(127, 140, 222), rgba(255, 255, 255, 0));
  background-color: rgba(58, 58, 58, 0.5);
} */

.table-location {

  top: 45px;
  width: 100%;
  height: 100%;
  /* background-color: white; */
}


.history-sort-button{
    background-image:url('../assets/img/module2/sorticon1.png'); 
    /* position: absolute; */
    background-size: 100% 100%; /* 背景图片覆盖按钮大小 */
    margin-left:10px;
    /* background-repeat: no-repeat; */
    background-color: transparent;
    color:transparent;
    width: 25px;
    height: 25px;
    border: none;
    cursor: pointer;
    pointer-events: auto;
  }
</style>
